<div>
	<div class="breadcrumb">
		<a class="prev" onclick="history.go(-1)"></a>
		<a class="next" onclick="history.go(1)"></a>
		<span *ngIf="!id">{{'agency.addAgency'|translate}}</span>
		<span *ngIf="id">{{'agency.editAgency'|translate}}</span>
	</div>
	<div class="tab-title">
		{{'agency.addTitle1'|translate}}
	</div>
	<form nz-form [formGroup]="validateForm" class="tour-form">
		<div nz-row [nzGutter]="24">
			<div nz-col [nzSpan]="6">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="name">{{'agency.name'|translate}}</nz-form-label>
					<nz-form-control>
						<input nz-input placeholder="{{'placeholder.input'|translate}}{{'agency.name'|translate}}" id="name" name="name" formControlName="name" />
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="areaId">{{'agency.areaId'|translate}}</nz-form-label>
					<nz-form-control>
						<nz-select style="width: 100%" id="areaId" name="areaId" formControlName="areaId">
							<nz-option *ngFor="let i of areaList" [nzLabel]="i.name" [nzValue]="i.id"></nz-option>
						</nz-select>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="12">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="mobile">{{'agency.address'|translate}}</nz-form-label>
					<nz-form-control>
						<input nz-input placeholder="{{'placeholder.input'|translate}}{{'agency.address'|translate}}" formControlName="address" />
					</nz-form-control>
				</nz-form-item>
			</div>
		</div>
		<div nz-row [nzGutter]="24">
			<div nz-col [nzSpan]="20">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired>{{'agency.time'|translate}}</nz-form-label>
					<nz-form-control>
						<clain-week-time formControlName="time"></clain-week-time>
					</nz-form-control>
				</nz-form-item>
			</div>
		</div>
		<div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="24">
                <nz-form-item nzFlex>
                    <nz-form-label nzRequired nzFor="name">{{'agency.images'|translate}}<span>{{'agency.addtext1'|translate}}</span></nz-form-label>
                    <nz-form-control style="padding-bottom: 25px;">
                        <nz-upload
                            nzAccept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
                            [nzAction]="uploadUrl"
                            nzListType="picture-card"
                            [(nzFileList)]="fileList"
                            [nzShowUploadList]="true"
							[nzPreview]="handlePreview"
							[nzBeforeUpload]="beforeUpload"
                            nzName="image"
							(nzChange)="change($event)"
                        >
                            <i nz-icon nzType="plus"></i>
                            <div class="ant-upload-text">{{'upload'|translate}}</div>
                        </nz-upload>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
		<div class="tab-title">
			{{'agency.addTitle2'|translate}}
		</div>
		<div nz-row [nzGutter]="24">
			<div nz-col [nzSpan]="6">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="name">{{'agency.starLevel'|translate}}</nz-form-label>
					<nz-form-control>
						<nz-form-control>
							<nz-select style="width: 100%" id="starLevel" name="starLevel" formControlName="starLevel">
								<nz-option [nzLabel]="language.starLevel.one" nzValue="1"></nz-option>
								<nz-option [nzLabel]="language.starLevel.two" nzValue="2"></nz-option>
								<nz-option [nzLabel]="language.starLevel.three" nzValue="3"></nz-option>
								<nz-option [nzLabel]="language.starLevel.four" nzValue="4"></nz-option>
								<nz-option [nzLabel]="language.starLevel.five" nzValue="5"></nz-option>
							</nz-select>
						</nz-form-control>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="contactName">{{'agency.contactName'|translate}}</nz-form-label>
					<nz-form-control>
							<input nz-input placeholder="{{'placeholder.input'|translate}}{{'agency.contactName'|translate}}" formControlName="contactName" />
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="contactTel">{{'agency.contactTel'|translate}}</nz-form-label>
					<nz-form-control>
						<input nz-input placeholder="{{'placeholder.input'|translate}}{{'agency.contactTel'|translate}}" formControlName="contactTel" />
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="reservationFee">{{'agency.reservationFee'|translate}}</nz-form-label>
					<nz-form-control>
						<nz-input-group [nzSuffix]="suffixTemplate">
							<input nz-input placeholder="{{'placeholder.input'|translate}}{{'agency.reservationFee'|translate}}" formControlName="reservationFee" />
						</nz-input-group>
						<ng-template #suffixTemplate>{{'unit'|translate}}</ng-template>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="24">
				<nz-form-item nzFlex>
					<nz-form-label style="width:160px;" nzRequired nzFor="allowMemberLevel">{{'agency.allowMemberLevel'|translate}}</nz-form-label>
					<nz-form-control>
						<nz-select style="width: 200px;" formControlName="allowMemberLevel" [nzAllowClear]="true">
							<nz-option [nzLabel]="language.userLevel.vip" nzValue="vip"></nz-option>
							<nz-option [nzLabel]="language.userLevel.normal" nzValue="normal"></nz-option>
						</nz-select>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="12" *ngIf="validateForm.get('allowMemberLevel').value === 'vip'">
				<nz-form-item nzFlex>
					<nz-form-label nzFor="mobile">{{'agency.cateIds'|translate}}</nz-form-label>
					<nz-form-control>
						<nz-select
						[nzMaxTagCount]="8"
						[nzMaxTagPlaceholder]="tagPlaceHolder"
						nzMode="multiple"
						nzPlaceHolder="{{'placeholder.select'|translate}}{{'agency.cateIds'|translate}}"
						formControlName="cateIds"
						>
							<nz-option *ngFor="let option of classifyList" [nzLabel]="option.name" [nzValue]="option.id"></nz-option>
						</nz-select>
						<ng-template #tagPlaceHolder let-selectedList> 还有{{ selectedList.length }}个选项 </ng-template>
					</nz-form-control>
				</nz-form-item>
			</div>
		</div>
		<div nz-row [nzGutter]="24">
			<div nz-col [nzSpan]="12">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="name">{{'agency.agencyServiceItem'|translate}}</nz-form-label>
					<nz-form-control>
						<nz-select nzMode="tags" style="width: 100%;" [(nzOpen)]="noSelect" [nzFilterOption]="filterOption" [nzShowArrow]="false" nzPlaceHolder="{{'placeholder.tags'|translate}}" formControlName="agencyServiceItemList" (ngModelChange)="changeAgencyService($event)">
						</nz-select>
						<div style="line-height: 30px;">
							<nz-tag nzMode="checkable" *ngFor="let item of agencyServiceItemList" [nzChecked]="agencyServiceItemObj[item.name]" (nzCheckedChange)="agencyServiceItemChange($event,item)">{{item.name}} +</nz-tag>
						</div>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="12">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="brief">{{'agency.brief'|translate}}</nz-form-label>
					<nz-form-control>
						<textarea rows="6" maxlength="200" placeholder="{{'placeholder.textarea'|translate}}" formControlName="brief" nz-input></textarea>
					</nz-form-control>
				</nz-form-item>
			</div>
			
        </div>
        
        <div class="cz">
            <a class="submit-btn" (click)="submit()">{{'cz.submit'|translate}}</a>
            <a class="default-btn" routerLink="/basicSetting/travelAgency">{{'cz.cancel'|translate}}</a>
        </div>
	</form>
</div>
